import React, {memo, useState} from 'react';
import {Button, TextField, Typography} from "@mui/material";
import "./AuthForm.css";
import {useForm, FormProvider, Controller, SubmitHandler, useFormState} from 'react-hook-form';
import {FormFields} from "./ FormFields/ FormFields";
import {hasFormSubmit} from "@testing-library/user-event/dist/utils";
import {RHFAutocompleteField} from "./ FormFields/RHFAutocompleteFieldProps";


export interface ISignForm {
    login: string,
    password: string,
    autocomplete: string,
    autocomplete2: string,
}
export const AuthForm = memo(() => {
    const methods = useForm<ISignForm>({
        mode: "onChange"
    });


    const onSubmit: SubmitHandler<ISignForm> = (data) => {
        console.log(data);
    };

    const options = [
        {id: "1", label: "Option 1"},
        {id: "2", label: "Option 2"},
    ];

    return (
        <>
            <div className="auth-form">
                <FormProvider {...methods}>
                <form className="auth-form" onSubmit={methods.handleSubmit(onSubmit)}>
                    <FormFields />
                    <Button
                        type="submit"
                        variant="contained"
                        fullWidth={true}
                        disableElevation={true}
                        sx={{
                            marginTop: 2
                        }}
                    >
                        Войти
                    </Button>
                </form>
                </FormProvider>
            </div>
        </>
    );
});

